<template>
  <el-dialog
    ref="content"
    :visible.sync="showDialog"
    :before-close="check"
    title="查看"
    width="70%"
    @open="openDialog"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item
        title="基本信息"
        name="1"
      >
        <div class="basicInfo">
          <el-form label-position="left">
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户编号：">
                  {{ userInfo.userNumber }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户状态：">
                  {{ userStatus }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户ID：">
                  {{ userInfo.userId }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户类型：">
                  {{ userType }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否冻结：">
                  {{ userInfo.userFreezestatus === '1' ? '冻结' : '解冻' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户密码：">
                  {{ userInfo.userPassword }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户来源：">
                  {{ userInfo.userComeFormStr }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="注册时间：">
                  {{ userInfo.userCreatetime }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="机顶盒编号：">
                  {{ userInfo.userBoxmac }}
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="账号有效期天数：">
                  {{ userInfo.userEffectivedays }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="支付类型：">
                  {{ userInfo.userPaytype === '1' ? '预付费' : '后付费' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户批次:">
                  {{ userInfo.batchNumber }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
                <el-form-item label="最后活动地址：">
                  {{ userInfo.userPaytype }}
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="平台：">
                  {{ userInfo.platformIdStr }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="运营商：">
                  {{ userInfo.userOperatorStr }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="激活时间：">
                  {{ userInfo.userActivatetime }}
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="超出有效期仍可激活：">
                  {{ userInfo.userDelayactivation === '1' ? '是' : '否' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地域：">
                  {{ userInfo.userAreacodeStr }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="账号有效期：">
                  <el-popover
                    v-if="userInfo.userLicensingwindowstart"
                    :content="userInfo.userLicensingwindowstart"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userLicensingwindowstart }}</span>
                  </el-popover>
                  至
                  <el-popover
                    v-if="userInfo.userLicensingwindowend"
                    :content="userInfo.userLicensingwindowend"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userLicensingwindowend }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="激活有效期：">
                  <el-popover
                    v-if="userInfo.userActivationeffectivestart"
                    :content="userInfo.userActivationeffectivestart"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userActivationeffectivestart }}</span>
                  </el-popover>
                  至
                  <el-popover
                    v-if="userInfo.userActivationeffectiveend"
                    :content="userInfo.userActivationeffectiveend"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userActivationeffectiveend }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="设备信息"
        name="4"
      >
        <div class="basicInfo">
          <el-table
            :data="userInfo.deviceBeanList"
            highlight-current-row
            border
            style="width: 100%"
          >
            <el-table-column label="设备MAC地址">
              <template slot-scope="scope">
                {{ scope.row.deviceMacAddress }}
              </template>
            </el-table-column>
            <el-table-column label="设备编号">
              <template slot-scope="scope">
                {{ scope.row. deviceID }}
              </template>
            </el-table-column>
            <el-table-column label="设备型号">
              <template slot-scope="scope">
                {{ scope.row. deviceModel }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <!-- </el-card> -->
      <el-collapse-item
        title="个人信息"
        name="2"
      >
        <!--     <el-card>
      <div slot="header">
        <span>个人信息</span>
      </div> -->
        <div class="basicInfo">
          <el-form>
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名：">
                  {{ userInfo.userName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="昵称：">
                  {{ userInfo.userNickname }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="积分：">
                  {{ userInfo.userCreditTotal }}
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="邮政编码：">
                  {{ userInfo.userZip }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="性别：">
                  {{ userGentle }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号：">
                  {{ userInfo.userIdentity }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="账户：">
                  {{ userInfo.userPortalid }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="出生日期：">
                  {{ userInfo.userBirthday }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="籍贯：">
                  {{ userInfo.userNativeplace }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="固定电话：">
                  {{ userInfo.userTelephone }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="手机号：">
                  {{ userInfo.userMobilephone }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ：">
                  {{ userInfo.userQQ }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱：">
                  {{ userInfo.userEmail }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="密码提示问题：">
                  <el-popover
                    v-if="userInfo.userQuestion"
                    :content="userInfo.userQuestion"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userQuestion.length > 10 ? userInfo.userQuestion.slice(0,10) + '...' : userInfo.userQuestion }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="密码找回问题：">
                  <el-popover
                    v-if="userInfo.userAnswer"
                    :content="userInfo.userAnswer"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userAnswer.length > 10 ? userInfo.userAnswer.slice(0,10) + '...' : userInfo.userAnswer }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急邮箱：">
                  {{ userInfo.userUrgent }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="所有终端：">
                  {{ userInfo.userTerminal }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在地：">
                  {{ userInfo.userRegion }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="IP地址：">
                  {{ userInfo.userLastactip }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="工作单位：">
                  <el-popover
                    v-if="userInfo.userCompany"
                    :content="userInfo.userCompany"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userCompany.length > 10 ? userInfo.userCompany.slice(0,10) + '...' : userInfo.userCompany }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="居住地址：">
                  <el-popover
                    v-if="userInfo.userHomeadrress"
                    :content="userInfo.userHomeadrress"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userHomeadrress.length > 10 ? userInfo.userHomeadrress.slice(0,10) + '...' : userInfo.userHomeadrress }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工作地址：">
                  <el-popover
                    v-if="userInfo.userWorkadrress"
                    :content="userInfo.userWorkadrress"
                    placement="top"
                    trigger="hover"
                  >
                    <span
                      slot="reference"
                      style="cursor:pointer"
                      type="info"
                    >{{ userInfo.userWorkadrress.length > 10 ? userInfo.userWorkadrress.slice(0,10) + '...' : userInfo.userWorkadrress }}</span>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="会员积分"
        name="3"
      >
        <el-form label-position="left">
          <el-row>
            <el-col :span="8">
              <el-form-item label="总积分：">
                {{ userInfo.userCreditTotal }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总成长值：">
                {{ userInfo.userGrowthTotal }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前会员等级：">
                {{ userInfo.membershipLevel }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>
<script>
import secret from '@/utils/secret'
// import { watch } from '@/api/liantong'
import { mapGetters } from 'vuex'
import { newDetail, getSelect } from '@/api/search.js'
export default {
  name: 'WatchInfo',
  props: {
    // 遮罩
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ''
    },
    platformidValue: {
      type: String,
      default: ''
    },
    platForm: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      userAreacodeArr: [],
      userComefromArr: [],
      activeNames: ['1'],
      showDialog: false,
      userInfo: {
        userLicensingwindowstart: '',
        userLicensingwindowend: '',
        userActivationeffectivestart: '',
        userActivationeffectiveend: '',
        userQuestion: '',
        userAnswer: '',
        userCompany: '',
        userHomeadrress: '',
        userWorkadrress: ''
      },
      userOperatorArr: [],
      list: [],
      iddd: null
    }
  },
  computed: {
    ...mapGetters(['assignment', 'token']), // userInfo.userType
    // 用户类型
    userType() {
      var type = ''
      if (this.userInfo.userType === '9' || this.userInfo.userType === '') {
        type = '普通营业厅'
      }
      if (this.userInfo.userType === '8') {
        type = '集团大客户'
      }
      if (this.userInfo.userType === '7') {
        type = '测试用户'
      }
      if (this.userInfo.userType === '6') {
        type = '商务用户'
      }
      if (this.userInfo.userType === '0') {
        type = '其他'
      }
      if (this.userInfo.userType === '1') {
        type = '公免用户'
      }
      if (this.userInfo.userType === '2') {
        type = '认证黑名单'
      }
      return type
    },
    // 用户性别
    userGentle() {
      var gentle = ''
      if (this.userInfo.userGentle === '1') {
        gentle = '男'
      }
      if (this.userInfo.userGentle === '2') {
        gentle = '女'
      }
      return gentle
    },
    // 用户状态
    userStatus() {
      var status = ''
      if (this.userInfo.userStatus === '1') {
        status = '待销售'
      }
      if (this.userInfo.userStatus === '2') {
        status = '待激活'
      }
      if (this.userInfo.userStatus === '3' || this.userInfo.userStatus === '') {
        status = '激活'
      }
      if (this.userInfo.userStatus === '4') {
        status = '待销户'
      }
      if (this.userInfo.userStatus === '5') {
        status = '销户'
      }
      if (this.userInfo.userStatus === '6') {
        status = '超期未激活'
      }
      if (this.userInfo.userStatus === '7') {
        status = '服务过期'
      }
      return status
    },
    // 用户来源
    userComefrom() {
      var from = ''
      if (this.userInfo.userComefrom === '1') {
        from = '用户注册'
      }
      if (this.userInfo.userComefrom === '2') {
        from = '后台添加'
      }
      if (this.userInfo.userComefrom === '3') {
        from = '运营商导入'
      }
      if (this.userInfo.userComefrom === '4') {
        from = '后台导入'
      }
      return from
    },
    // 运营商
    userOperator() {
      var opera = ''
      if (this.userInfo.userOperator === '1') {
        opera = '联通'
      }
      if (this.userInfo.userOperator === '2') {
        opera = '电信'
      }
      if (this.userInfo.userOperator === '3') {
        opera = '移动'
      }
      return opera
    }
  },
  watch: {
    dialogTableVisible(newVal) {
      console.log(this.platForm)
      if (newVal) {
        this.getSelects(this.userId, this.platformidValue)
      }
      this.showDialog = newVal
      // console.log(this.platForm)
    }
  },
  mounted() {},
  methods: {
    getSelects(userId, platformidValue) {
      // 地域
      var data3 = {
        functionType: 'areaCode'
      }
      getSelect(secret.Encrypt(data3)).then(res => {
        if (res.resultCode === '0000') {
          this.userAreacodeArr = res.data.list
          // 运营商
          var data1 = {
            functionType: 'userOperator'
          }
          getSelect(secret.Encrypt(data1)).then(res => {
            if (res.resultCode === '0000') {
              this.userOperatorArr = res.data.list
              // 用户来源
              var data2 = {
                functionType: 'userComefrom'
              }
              getSelect(secret.Encrypt(data2)).then(res => {
                if (res.resultCode === '0000') {
                  this.getUser(userId, platformidValue)
                  this.userComefromArr = res.data.list
                }
              })
            }
          })
        }
      })
    },
    // 滚动条
    openDialog() {
      // console.log(this.$refs.content)
      // this.$nextTick(() => { // 图片列表栏始终左对齐
      //   // this.$refs.content.$el.scrollTop(document.body.scrollHeight, 0)
      //   // this.$refs.content.$el.document.documentElement = 0
      // })
    },
    // 父子组件回调
    check() {
      this.showDialog = false
      this.$emit('closeDialog')
      this.activeNames = ['1']
    },
    clickss(e) {
      e.scrollTop = 0
    },
    // 请求列表
    getUser(id, plat) {
      const res = {
        userId: id,
        platformId: plat
      }
      console.log('请求参数')
      console.log(res)
      newDetail(secret.Encrypt(res)).then(response => {
        var data = response.data
        console.log('返回数据')
        console.log(data)
        this.userInfo = data
        this.userAreacodeArr.forEach(item => {
          if (item.typeId === data.userAreacode) {
            data.userAreacodeStr = item.typeName
          }
        })
        this.platForm.forEach(item => {
          if (item.typeId === data.platformId) {
            data.platformIdStr = item.typeName
          }
        })
        this.userComefromArr.forEach(item => {
          if (item.typeId === data.userComefrom) {
            data.userComeFormStr = item.typeName
          }
        })
        this.userOperatorArr.forEach(function(item) {
          console.log(item.typeId)
          console.log(data.userComefrom)
          if (item.typeId === data.userOperator) {
            data.userOperatorStr = item.typeName
          }
        })
      })
    }
  }
}
</script>
<style>
</style>
<style>
.el-dialog {
  margin-top: 10vh !important;
  max-height: calc(100% - 120px);
}
.el-dialog {
  display: flex;
  flex-direction: column;
}
.el-dialog .el-dialog__body {
  overflow: auto;
}
.basicInfo {
  width: 99%;
  margin: 0 auto;
  padding-left: 20px;
}
</style>
